<template>
  <view class="bg-box">
    <view class="bg-white custom-box"
          :style="'height:'+custom_bar+'px'"></view>
    <view id="search" class="cu-bar search bg-white fixed custom-bar-box" :style="'top:'+custom_bar+'px'">
      <view class="action">
        <image src="/static/icon/detail/fanhui-2@2x.png" style="width: 24upx; height: 40upx;" @click="handleBackIndex()"></image>
      </view>
      <view class="search-form round">
        <image src="/static/icon/index/sousuo@2x.png" class="search-icon"></image>
        <input :adjust-position="false" type="text" placeholder="搜索" placeholder-style="color: #D8D8D8;" v-model="search_word"
               confirm-type="search" style="font-size: 28upx; line-height: 20px !important;" @confirm="handleToSearchResult(search_word)" />
      </view>
      <view class="action">
        <view class="cancel-box" @click="handleBackIndex()">取消</view>
      </view>
    </view>
    <!-- 占搜索位-->
    <view class="search-placeholder"  :style="'height: '+search_height+'px'"></view>
    <view style="width: 100%; padding: 0 20upx;" v-if="show_flag">
      <view class="flex align-center justify-between" style="width: 100%; height: 76upx;">
        <view class="flex align-center">
          <image src="/static/icon/index/lishisousuo@2x.png" style="width: 30upx; height: 30upx; margin-right: 10upx;"></image>
          <view style="font-size: 28upx; color: #666666;">历史搜索</view>
        </view>
        <image v-if="search_list.length" src="/static/icon/index/shanchu@2x.png" style="width: 32upx; height: 38upx;" @click="prompt_flag = true"></image>
      </view>
      <view class="popular">
        <view v-if="search_list.length > 0" class="popular-frame" v-for="(item,index) in search_list" :key="index"
              @click="handleToSearchResult(item)">
          <view class="text-hidden">{{item}}</view>
        </view>
        <view v-if="search_list.length == 0" class="justify-center flex-direction" style="width: 100%; text-align: center; padding-top: 200upx;">
          <image src="/static/image/no_search@2x.png" style="width: 264upx; height: 264upx;"></image>
          <view style="font-size: 24upx; color: #999999;">暂无内容</view>
        </view>
      </view>
    </view>
    <view class="cu-modal" :class="prompt_flag?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 462upx;">
        <view class="cu-bar justify-end">
          <view class="content">提示</view>
        </view>
        <view style="font-size: 28upx; color: #333333; margin-bottom: 34upx;">是否要清空历史搜索记录</view>
        <view class="flex justify-center align-center delete-choose">
          <view class="action cancel flex align-center" @click="prompt_flag = false">取消</view>
          <view class="search-interval"></view>
          <view class="action determine flex align-center" @click="handleClearSearchHistory">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {searchRecord_getListByCon, searchRecord_delSearchRecord} from "api/search/search";
export default {
  data() {
    return {
      custom_bar: 0, //通知栏高度
      search_height: 0, //搜索框高度
      prompt_flag: false, //触底标识
      search_list: [], // 搜索历史数据
      search_word: '',//搜索词
      show_flag: false,
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#search').boundingClientRect(data => {
      this.search_height = data.height + this.custom_bar;
    }).exec();
  },
  methods: {
    pageInit(){
      searchRecord_getListByCon().then(res=>{
        if(res.data.keyword){
          this.search_list = res.data.keyword;
        }
      }).finally(err=>{
        this.show_flag = true;
      })
    },
    //去搜索结果页
    handleToSearchResult(search_word){
      uni.hideKeyboard()
      this.$uniNavigateTo({
        url: '/pages/index/search/searchResult',
        query:{
          search_word
        }
      })
      this.search_word = '';
    },
    //返回首页
    handleBackIndex(){
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    //清空记录
    handleClearSearchHistory(){
      searchRecord_delSearchRecord().then(res=>{
        this.search_list = [];
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }).catch(err=>{
        uni.showToast({
          title: err.msg,
          icon: 'none'
        })
      })
      this.prompt_flag = false;
    },
  },
  onLoad() {
    this.custom_bar = uni.getStorageSync('system_info').statusBarHeight;
  },
  onShow(){
    this.pageInit();
  },
}
</script>

<style lang="less" scoped>
.search-placeholder{
  width: 100%;
}
.cancel-box{
  color: #333333;
  font-size: 28upx;
}
.search-icon{
  width: 26upx;
  height: 30upx;
  margin: 0 22upx;
}
.custom-bar-box{
  width: 100%;
  border: none;
  margin-bottom: 48upx;
}
.custom-box{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
.bg-box{
  width: 100%;
  min-height: 100vh;
}
.cancel {
  font-size: 26upx;
}
.determine {
  font-size: 26upx;
  color: #E52718;
}
/deep/ .cu-bar.fixed, .nav.fixed{
  box-shadow: none;
}
/deep/ .cu-bar .search-form {
  height: 70upx;
  border: 2upx solid #EDEDED;
  background-color: white;
}

/deep/ .uni-swiper-wrapper {
  border-radius: 20upx;
}

/deep/ .uni-swiper-dots {
  left: 90% !important;
  width: auto;
}

/deep/ .uni-swiper-dot {
  width: 16upx !important;
  height: 16upx !important;
  background-color: white;
}

/deep/ .uni-swiper-dot-active {
  background-color: #E52718;
}

/deep/ .uni-swiper-dot-active::after {
  content: none !important;
  background-color: #E52718 !important;
}

.list {
  width: 346upx;
  height: 618upx;
  border-radius: 20upx;
  margin-bottom: 30upx;
}

.tag {
  font-size: 22upx;
  padding: 0 12upx;
  color: #E52718;
  height: 40upx;
  background-color: #FFE9E7;
  border-radius: 4upx;
}
.popular {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
}

.popular-frame {
  max-width: 250upx;
  background-color: #F8F8F8;
  color: #666666;
  padding: 17upx 20upx;
  margin-right: 50upx;
  margin-bottom: 30upx;
  font-size: 28upx;
  border-radius: 20upx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-interval{
  width: 1px;
  height: 54upx;
  background-color: #F8F8F8;
  margin: 0 20%;
}
.delete-choose{
  height: 70upx;
  border-top: 1px solid #F8F8F8;
}
</style>

